<template>
	<view class="detail">
		<view class="item">
			<text>车牌号：</text> <text style="font-size: 0.8em;">{{carNumber}}</text>
		</view>
		<view class="item">
			<text>上传用户：</text> <text style="font-size: 0.8em;">{{createBy}}</text>
		</view>
		<view class="item">
			<text>加油金额：</text> <text style="font-size: 0.8em;">{{amount | cutMoneyFiter}} 元</text>
		</view>
		<view class="item">
			<text>行驶里程：</text> <text style="font-size: 0.8em;">{{travelMile | cutMoneyFiter}} 公里</text>
		</view>
		<view class="item">
			<text>时间：</text> <text style="font-size: 0.8em;">{{createTime.substring(0,16)}}</text>
		</view>
		<view class="item">
			<text>加油站：</text> <text style="font-size: 0.8em;color: cornflowerblue;"
				@click="openLocation">{{stationName}}</text>
		</view>
		<view class="item">
			<text>详细地址：</text> <text style="font-size: 0.8em;">{{address}}</text>
		</view>
		<view>
			<view class="item">现场照片:</view>
			<image :src="siteImage? siteImage : '/static/noimage.png' " @click="clickImg(siteImage)"
				mode="aspectFill" />
		</view>
		<view>
			<view class="item">收据照片:</view>
			<image :src="receiptImage? receiptImage : '/static/noimage.png' " @click="clickImg(receiptImage)" 
				mode="aspectFill" />
		</view>
		<view class="item">
			<text>实收金额：</text> <text style="font-size: 0.8em;">{{receivedAmount}} 元</text>
		</view>
		<view class="item">
			<text>卡片余额：</text> <text style="font-size: 0.8em;">{{cardBalance}} 元</text>
		</view>
		<u-gap height="40"></u-gap>

	</view>
</template>

<script>
	import {
		cutMoneyFiter
	} from '@/utils/defined'
	export default {
		data() {
			return {
				id: '',
				userName: '',
				carNumber: '',
				travelMile: '',
				amount: '',
				stationName: '',
				address: '',
				longitude: '',
				latitude: '',
				siteImage: '',
				receiptImage: '',
				receivedAmount: '',
				cardBalance: '',
				createTime: '',
				createBy: ''
			}
		},
		filters: {
			cutMoneyFiter
		},
		onLoad(option) {
			this.id = option.id
			this.getRecordDetail(this.id)
		},
		methods: {
			getRecordDetail(id) {
				let params = id
				this.$u.api.record.recordDetail(params).then((res) => {
					this.id = res.data.id
					this.userName = res.data.userName
					this.carNumber = res.data.carNumber
					this.travelMile = res.data.travelMile
					this.amount = res.data.amount
					this.stationName = res.data.stationName
					this.address = res.data.address
					this.longitude = res.data.longitude
					this.latitude = res.data.latitude
					this.siteImage = res.data.siteImage
					this.receiptImage = res.data.receiptImage
					this.receivedAmount = res.data.receivedAmount
					this.cardBalance = res.data.cardBalance
					this.createTime = res.data.createTime
					this.createBy = res.data.createBy
				}).catch(e => {
					if(e.data.msg === '请先登录'){
						uni.navigateTo({
							url: '/pages/sys/login/index'
						})
					}
					if(e.data.msg === '请先认证'){
						uni.showToast({
							title: '尚未通过认证',
							icon: 'error',
							duration: 2000
						});
					}
				});
			},
			openLocation() {
				uni.openLocation({
					latitude: Number(this.latitude),
					longitude: Number(this.longitude),
					scale: 18
				});
			},
			clickImg(url) {
				wx.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			}
		}
	}
</script>

<style scoped>
	.title {
		margin-bottom: 50rpx;
		text-align: center;
		font-size: 1.5em;
		font-weight: bold;
		color: #8D72E1;
	}

	.detail {
		margin-top: 50rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.item {
		margin-top: 20rpx;
		font-family: ;
		font-size: 1em;
		border-left-style: solid;
		border-left-color: #8D9EFF;
		padding-left: 20rpx;
	}

	.map {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	image {
		width: 100%;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
</style>
